<template>
	<view>
		<view class="header">
			<view class="content"><image src="https://www.szzn.group/uploads/20221115/dab4855575798ff79978bf86a8d4d561.jpg" mode=""></image></view>
		</view>
		<view class="">
			<view class="listStyle">
				<view class="" @click="actives(i.categoryId)" :class="active == i.categoryId ? 'active-style' : ''" v-for="(i, index) in childLIst" :key="index">{{ i.name }}</view>
			</view>
			<view class="contentlist" v-for="i in lists" :key="i">
				<view class="title">#&nbsp;{{ i.title }}</view>
				<view class="content">
					<view class="left">
						<view class="name" @click="handledToDetail(i.threadId)">{{ i.content.text }}</view>
						<view class="" style="display: flex;flex-wrap: wrap;">
							<image
								style="width: 150rpx;height: 150rpx;display: block;"
								:src="item.thumbUrl"
								mode=""
								@click="imagePreview(i.threadId, inx)"
								v-for="(item, inx) in i.content.indexes[101].body"
								:key="inx"
							></image>
						</view>
						<view class="mingchen">
							<view class="">{{ i.user.nickname }}</view>
							<view class="">{{ i.diffTime }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="zanwu" v-if="lists.length == 0"><view class="">没有更多内容</view></view>
		</view>
		<view class="add" @click="handledToPublish"><van-icon name="plus" color="#289958" style="font-weight: bold;" /></view>
	</view>
</template>

<script>
import { getTopicList, getDabiaoti } from '@/api/circle.js';
export default {
	data() {
		return {
			active: 0,
			lists: [],
			categoryid: '',
			childLIst: [],
			arr: []
		};
	},
	onLoad(options) {
		this.categoryid = options.id;
		this.getTopicList(this.categoryid);
		uni.setNavigationBarTitle({
			title: options.name
		});
	},
	// 分享
	onShareAppMessage() {
		return {
			title: '优栽园',
			path: 'page_forum/special/special'
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '优栽园',
			path: 'page_forum/special/special'
		};
	},
	onShow() {
		let time = setTimeout(() => {
			this.getTopicList(this.categoryid);
			clearTimeout(time);
		}, 500);
	},
	methods: {
		actives(type) {
			this.active = type;
			if (this.active == 0) {
				this.getTopicList(this.categoryid);
			} else {
				let data = `page=${1}&perPage=${200}&filter[categoryids][0]=${
					this.active
				}&filter[essence]0=${0}&filter[attention]=${0}&filter[sort]=${1}&scope=${0}&dzqSid=${74874316 - 1664446553074}&dzqPf=${'h5'}`;
				getTopicList(data).then(res => {
					this.lists = res.data.Data.pageData;
				});
			}
		},

		getDabiaoti() {
			let data = `dzqSid=${22214006 - 1668060231880}&dzqPf=${'h5'}`;
			getDabiaoti(data).then(res => {
				this.tagsList = res.data.Data;
				this.tagsList.forEach(item => {
					if (item.categoryId == this.categoryid) {
						if (item.children.length == 0) {
							this.childLIst = [];
						} else {
							this.childLIst = item.children;
							this.childLIst.unshift({
								name: '全部',
								categoryId: 0
							});
						}
					}
				});
			});
		},

		handledToDetail(i) {
			uni.navigateTo({
				url: '/page_forum/articledetail/articledetail?id=' + i
			});
		},
		getTopicList(id) {
			let data = `page=${1}&perPage=${200}&filter[categoryids][0]=${id}&filter[categoryids][1]=${3}&filter[categoryids][2]=${4}&filter[categoryids][3]=${5}&filter[essence]0=${0}&filter[attention]=${0}&filter[sort]=${1}&scope=${0}&dzqSid=${74874316 -
				1664446553074}&dzqPf=${'h5'}&`;
			getTopicList(data).then(res => {
				this.lists = res.data.Data.pageData;
				this.getDabiaoti();
			});
		},
		imagePreview(id, index) {
			this.lists.forEach(item => {
				if (item.threadId == id) {
					item.content.indexes[101].body.forEach(i => {
						this.arr.push(i.url);
					});
				}
			});
			uni.previewImage({
				current: index,
				urls: this.arr
			});
			this.arr = [];
		},
		// 发布
		handledToPublish() {
			if (this.categoryid == 1) {
				this.categoryid = this.active;
			}
			uni.navigateTo({
				url: '/page_forum/publish/publish?id=' + this.categoryid
			});
		}
	}
};
</script>

<style lang="scss">
.header {
	height: 252rpx;
	// padding: 50rpx 28rpx;
	width: 100%;
	box-sizing: border-box;

	image {
		width: 100vw;
		height: 252rpx;
	}
}

.add {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #ecfaf1;
	box-shadow: 0px 0px 11px 1px rgba(61, 185, 99, 0.5);
	position: fixed;
	bottom: 150rpx;
	right: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.content {
	// display: flex;
	// align-items: center;
	.left {
		image {
			width: 112rpx;
			height: 122rpx;
			border-radius: 6rpx;
			margin-right: 20rpx;
		}
	}

	.right {
		font-size: 20rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		> view:nth-child(1) {
			margin-top: 40rpx;
		}
	}
}

::v-deep .van-tabs__line {
	background-color: #43a66d !important;
}

.contentlist {
	padding: 20rpx 30rpx 10rpx;
	border-bottom: 1px solid #eee;

	.dongtai {
		margin: 20rpx 0 0;
		font-size: 24rpx;
		color: #ccc;
	}

	.content {
		display: flex;
		justify-content: space-between;

		.right {
			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// width: 500rpx;

			.name {
				margin-bottom: 30rpx;
				font-size: 26rpx;
			}

			.mingchen {
				display: flex;
				font-size: 22rpx;
				color: #ccc;
				justify-content: space-between;
			}
		}
	}
}

.listStyle {
	display: flex;
	font-size: 28rpx;
	padding: 20rpx;

	view {
		// width: 160rpx;
		text-align: center;
		padding: 20rpx 30rpx;
	}
}

.active-style {
	color: #289958;
	border-bottom: 3px solid #289958;
	font-weight: 700;
}

.zanwu {
	display: flex;
	justify-content: center;
	padding: 30rpx 0;
	font-size: 26rpx;
	color: #ccc;
}
</style>
